<template>
	<div>
		<div v-if="book != null">
			当前借书{{book.bookName}}
			<a type="button" class="btn btn-outline-primary" @click="remandBook()">还书</a>
		</div>
		<div v-else>当前无借书</div>
	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			store.state.ifFrameShow = true;
			//onMounted()生命周期
			onMounted(() => {
				axios
					.post("GetUserBook")
					.then((response) => {
						data.book = response.data.data
					})
					.catch((error) => console.log(error)); // 请求失败处理
			});
			const data = reactive({
				imgPath: store.state.imageUrl,
				user: {},
				book: {},
				remandBook: () => {
					axios
						.post("Remand")
						.then((response) => {
							alert(response.data.msg)
							axios
								.post("GetUserBook")
								.then((response) => {
									data.book = response.data.data
								})
								.catch((error) => console.log(error)); // 请求失败处理
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>

</style>
